<template>
  <div class="huawei-wrap">
    <div class="huawei-content">
        <div class="huawei-content-title"><span>华为认证体系</span> <span class="huawei-content-text">首页 > 认证课程体系 > 华为认证体系</span></div>
        <div class="huawei-details-wrap">
          <div class="huawei-list">
             <el-select v-model="value" clearable placeholder="ORACLE">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="value" clearable placeholder="ORACLE">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="value" clearable placeholder="ORACLE">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </div>
          <div class="huawei-position">
            <div class="position-details" v-for="(item,index) in details" :key="index">
              <div class="details-img-wrap" :style="{backgroundImage:'url('+item.imgurl+')'}">
                <div class="img-text01">{{item.imgtext01}}</div>
                <div class="img-text02">{{item.imgtext02}}</div>
              </div>
              <div class="details-item-wrap">
                <div class="details-title1">{{item.imgtext03}}</div>
                <div class="details-text2">{{item.imgtext04}}</div>
                <div class="details-text21">{{item.imgtext041}}</div>
                <div class="hw-line">
                  <div class="line01" @click="showDetail = false"></div>
                   <span style="font-szie:14px" class="showDetail"  @click="showDetail = false">展开</span>
                   <div class="hw-jia">+</div>
                </div>
                <div class="details-text3">{{item.imgtext05}}</div>
                <div class="details-text4">{{item.imgtext06}}</div>
                <div class="hw-line01"></div>
                <div class="hw-line2">
                  <div class="line01"></div>
                   <span style="font-szie:14px">收起</span>
                   <div class="hw-jian">-</div>
                  </div>
              </div>
              <div></div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import hwbg1 from "./bg1.png"
import hwbg2 from "./bg2.png"
import hwbg3 from "./bg3.png"
export default {
  data(){
    return{
      showDetail:true,
      hwbg1,hwbg2,hwbg3,
      details:[
        {
          imgurl:hwbg1,
          imgtext01:"HCIA",
          imgtext02:"工程师",
          imgtext03:"HCIA-Big Data",
          imgtext04:"Huawei Certified ICT Associate-Big Data",
          imgtext041:"培训与认证具备使用开源技术平台和华为FusionInsight HD开发大数据解决方案能力的高级工程师。",
          imgtext05:"认证前提：",
          imgtext06:"建议具备基本的大数据知识和计算机基础； 建议先学习HCIA-Big Data认证。",
          imgtext07:"HCIP-Big Data Operation & Maintenance",
          imgtext08:"Huawei Certified ICT Professional-Big Data Operation & Maintenance",
          imgtext09:"培训与认证具备大数据运行维护技术支持能力的高级工程师",
          imgtext10:"认证前提：",
          imgtext11:"建议具备大数据基础和计算机基础。",
          imgtext12:"展开",
          imgtext1202:"收起",
          imgtext13:"",
        },
          {
          imgurl:hwbg2,
          imgtext01:"HCIA",
          imgtext02:"工程师",
          imgtext03:"HCIA-Big Data",
          imgtext04:"Huawei Certified ICT Associate-Big Data",
          imgtext041:"培训与认证具备使用开源技术平台和华为FusionInsight HD开发大数据解决方案能力的高级工程师。",
          imgtext05:"认证前提：",
          imgtext06:"建议具备基本的大数据知识和计算机基础； 建议先学习HCIA-Big Data认证。",
          imgtext07:"HCIP-Big Data Operation & Maintenance",
          imgtext08:"Huawei Certified ICT Professional-Big Data Operation & Maintenance",
          imgtext09:"培训与认证具备大数据运行维护技术支持能力的高级工程师",
          imgtext10:"认证前提：",
          imgtext11:"建议具备大数据基础和计算机基础。",
          imgtext12:"展开",
          imgtext1202:"收起",
          imgtext13:"",
        },
          {
          imgurl:hwbg3,
          imgtext01:"HCIA",
          imgtext02:"工程师",
          imgtext03:"HCIA-Big Data",
          imgtext04:"Huawei Certified ICT Associate-Big Data",
          imgtext041:"培训与认证具备使用开源技术平台和华为FusionInsight HD开发大数据解决方案能力的高级工程师。",
          imgtext05:"认证前提：",
          imgtext06:"建议具备基本的大数据知识和计算机基础； 建议先学习HCIA-Big Data认证。",
          imgtext07:"HCIP-Big Data Operation & Maintenance",
          imgtext08:"Huawei Certified ICT Professional-Big Data Operation & Maintenance",
          imgtext09:"培训与认证具备大数据运行维护技术支持能力的高级工程师",
          imgtext10:"认证前提：",
          imgtext11:"建议具备大数据基础和计算机基础。",
          imgtext12:"展开",
          imgtext1202:"收起",
          imgtext13:"",
        },
         {
          imgurl:hwbg2,
          imgtext01:"HCIA",
          imgtext02:"工程师",
          imgtext03:"HCIA-Big Data",
          imgtext04:"Huawei Certified ICT Associate-Big Data",
          imgtext041:"培训与认证具备使用开源技术平台和华为FusionInsight HD开发大数据解决方案能力的高级工程师。",
          imgtext05:"认证前提：",
          imgtext06:"建议具备基本的大数据知识和计算机基础； 建议先学习HCIA-Big Data认证。",
          imgtext07:"HCIP-Big Data Operation & Maintenance",
          imgtext08:"Huawei Certified ICT Professional-Big Data Operation & Maintenance",
          imgtext09:"培训与认证具备大数据运行维护技术支持能力的高级工程师",
          imgtext10:"认证前提：",
          imgtext11:"建议具备大数据基础和计算机基础。",
          imgtext12:"展开",
          imgtext1202:"收起",
          imgtext13:"",
        },
      ],
        options: [{
          value: '选项1',
          label: 'Oracle 12c OCP'
        }, {
          value: '选项2',
          label: 'Oracle 12c OCM'
        },
        ], 
        value: '',
         options1: [{
          value1: '选项1',
          label1: 'Oracle 12c OCP'
        }, {
          value1: '选项2',
          label1: 'Oracle 12c OCM'
        },], 
        value1: ''  
    }
  },
   methods:{
       clickhw(index){
    this.teacherIndex = index
    this.showDetail = true
    // this.obj = this.teachertnformation.filter((item,_index)=>index==_index)[0]
  },
  
    }
}
</script>
<style  lang="stylus">
.huawei-content
    margin-top 20px
    margin-left 120px
    width: 1200px;
    background-color: #ffffff;
    padding 40px 40px 77px 41px
    .huawei-content-title
        display flex
        justify-content space-between
        margin-bottom 40px
        font-size: 28px;
        color: #1b1b1b;
        .huawei-content-text
            font-family: MicrosoftYaHeiLight;
            font-size: 12px;
            color: #666666;
    .huawei-details-wrap
        display flex
        .huawei-list
          width: 240px;
          
          background-color: #ffffff;
          margin-right 40px
          border: solid 1px #dcdcdc;
          .el-input__inner
            width: 240px;
            height 50px
            font-family: MicrosoftYaHei-Bold;
            font-size: 16px;
            line-height: 40px;
            color: #ffffff;
            border-left none
            border-bottom none
            border-top none
            border-right solid 0.5px #dcdcdc;
            border-radius: 0px;
          .el-input__inner:active
            background-color: #db0801;
    .huawei-position
        .position-details
            display flex
            .details-img-wrap
              padding 35px 95px 35px 88px
              margin-right 20px
              width: 266px;
              height: 141px;
              background pink
              // border-bottom dashed 1px #dcdcdc;
              .img-text01
                  font-family: Arial-BoldMT;
                  font-size: 36px;
                  font-weight: normal;
                  font-stretch: normal;
                  line-height: 40px;
                  letter-spacing: 0px;
                  color: #ffffff;
                  margin-bottom 19px
              .img-text02
                    width: 88px;
                    height: 26px;
                    background-color: #ffffff;
                    border-radius: 2px;
                    font-size: 12px;
                    line-height:26px;
                    color: #666666;
                    text-align center
            .details-item-wrap
                .details-title1
                    font-family: Arial-BoldMT;
                    font-size: 24px;
                    color: #1b1b1b; 
                .details-text2
                    font-family: ArialMT;
                    font-size: 14px;
                    color: #666666; 
                    margin:10px 0 17px 
                .details-text21
                    font-size: 14px;
                    color: #333333;
                    margin-bottom 40px
                .hw-line01
                  border-bottom : dashed 1px #dcdcdc;
                  .hw-ophen
                    cursor: pointer;
                  .hw-ophen:active
                    cursor: pointer;
                    display black 

                .hw-line
                  display flex
                  align-items center
                  .line01
                    font-size: 14px;
                    line-height: 40px;
                    color: #333333;
                    width: 482px;
                    border-bottom : dashed 1px #dcdcdc;
                  .hw-jia
                    width: 15px;
                    height: 15px;
                    line-height 15px;
                    display flex
                    justify-content center
                    background-color: #333333;
                    color: #ffffff;
                    font-size 15px
                    border-radius 50%
                    margin-left 14px
                .hw-line2
                  color: #009bec;
                  display flex
                  align-items center
                  .line01
                    font-size: 14px;
                    color: #333333;
                    width: 482px;
                    border-bottom : dashed 1px #dcdcdc;
                  .hw-jian
                    width: 15px;
                    height: 15px;
                    line-height 15px;
                    display flex
                    justify-content center
                    background-color: #009bec;
                    color: #ffffff;
                    font-size 15px
                    border-radius 50%
                    margin-left 14px
                .details-text3
                  font-size: 14px;
                  color: #009bec;
                  font-weight: bold;
                  line-height: 24px;
                .details-text4
                  font-family: MicrosoftYaHei;
                  font-size: 14px;
                  color: #333333;
                  margin-bottom 31px

</style>